{% extends "main/bazo.html" %}
{% load i18n %}
{% load static %}
{% block meta %}
{% endblock meta %}
{% block css_js %}
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
{% endblock css_js %}
{% block title %}
    {% trans 'search' %}
{% endblock title %}
{% block main_side %}
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <ul class="list-unstyled">
                                    {% for result in results %}
                                        <li class="media mt-2">
                                            {% if result.avataro_bildo_min %}
                                                <img class="mr-3 align-self-center list-image" src="{% get_media_prefix %}{{ result.avataro_bildo_min }}">
                                            {% else %}
                                                <img class="mr-3 align-self-center list-image" src="{% static 'main/images/defaulte-avataro.jpg' %}">
                                            {% endif %}
                                            <div class="media-body">
                                                <a href="{{ result.get_absolute_url }}">
                                                    <span class="mt-0">{{ result.header }}</span>
                                                </a>
                                                <br>
                                                {% if result.description %}
                                                    <span>{{ result.description }}</span>
                                                {% else %}
                                                    <span>{% trans 'La vivo estas bela!' %}</span>
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{#            <div class="col-2">#}
{#                <div class="row">#}
{#                    <div class="card">#}
{#                        <div class="card-body">#}
{#                            <div id="app">#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
        </div>
    </div>

{#    <script type="text/babel">#}
{#        class Test extends React.Component {#}
{#            render() {#}
{#                let x = 2;#}
{#                function f (x) {#}
{#                    return <div>{ x*2 }</div>;#}
{#                }#}
{#                return f(x);#}
{#            }#}
{#        }#}
{#        ReactDOM.render(#}
{#            <Test />,#}
{#            document.getElementById('app')#}
{#        );#}
{#    </script>#}
{% endblock main_side %}
